<template>
    <div>
      <h1>侦听器watch</h1>
      <p>{{ message }}</p>
      <button @click="handleClick">点击我</button>
      <input type="text" v-model="message" />
    </div>
  </template>
  <script setup>
  import { ref, watch } from "vue";
  const message = ref("hello world");
  const handleClick = () => {
    message.value = "hello vue3";
  };
  watch(
    message,
    (newVal, oldVal) => {
      console.log(newVal, oldVal);
      if (newVal.length > 5) {
        message.value = oldVal;
      }
    },
    {
      immediate: true,
      deep: true
    }
  );
  </script>
  